Summary

This PR implements a comprehensive OpenGraph metadata system for the Astro site, enabling proper social media sharing with dynamic image generation.

Changes Made

Core Infrastructure

• Added astro-seo package for structured OpenGraph and Twitter Card support
• Created OpenGraphMeta component - wrapper around astro-seo with proper TypeScript integration
• Built opengraph.ts utility library with helper functions for different content types
• Integrated Tailgraph service for dynamic OG image generation

Content Schema Updates

• Extended all content collections (blog, briefs, projects) with OpenGraph override fields:
  • ogTitle - custom OpenGraph title
  • ogDescription - custom OpenGraph description
  • ogImage - custom image URL
  • ogImageAlt - custom image alt text
  • noOgImage - disable automatic image generation
  • modifiedDate - article modification date

Page-Level Integration

• Blog posts: Article type with author, publish date, section metadata
• Briefs: Article type with category information and custom subtitles
• Projects: Website type with project-specific styling
• List pages: Dynamic counts (e.g., "12 posts", "8 briefs")
• Home page: Site overview with branded styling

Dynamic Image Generation

• Tailgraph integration for automatic OG image creation
• Consistent branding with site logo and dark theme
• Content-aware subtitles (dates for posts, categories for briefs, counts for lists)
• Fallback support for custom images when provided

Technical Details

OpenGraph Types

• Articles (blog/briefs): Include published_time, modified_time, author, section
• Website (projects/lists/home): Standard website metadata
• Twitter Cards: Large image format for all content types

Image Strategy

• Dynamic generation via Tailgraph API for consistent branding
• Override capability through frontmatter ogImage field
• Opt-out option via noOgImage flag
• Proper alt text with meaningful descriptions

Performance & SEO

• Structured metadata improves social media preview quality
• Dynamic images ensure consistent visual branding across shares
• Proper schema validation prevents metadata errors
• Twitter creator attribution (@PLXGitHub) for engagement tracking

Testing

• ✅ Linting passes - no ESLint errors
• ✅ Build succeeds - Astro compilation works correctly
• ✅ HTML validation - proper meta tags generated in output
• ✅ Schema validation - content collections accept new fields
• ✅ Image generation - Tailgraph URLs work correctly

Impact

• Enhanced social sharing with rich previews on Twitter, Facebook, LinkedIn
• Professional branding through consistent OG image styling
• SEO improvements via structured metadata
• Content flexibility through override options
• Future-proof architecture easily extensible for new content types

🤖 Generated with Claude Code